<template>
  <div>
    <div>
      <div style="background-color:white;">
        <q-card class="row no-wrap" style="white-space:nowrap;overflow-x:auto;">
          <router-link to='/wp/classification'>
           <q-btn v-if="data.length!=0"  dense color="light-blue" :label="$t('添加')" style="margin-top:10px;position:fixed;right:30px;z-index:999;">
           </q-btn>
          </router-link>
          <q-tabs
           v-for="( dataItem,index ) in data"
           :key="index"
           v-model="tabs"
           inverted
           active-color="primary"
           indicator-color="purple"
           class="col-md-0.4"
           align="justify">
            <q-tab
             :name= "dataItem.id"
             :label= "dataItem.name"></q-tab>
           </q-tabs>
        </q-card>
      </div>
      <div v-if="data.length!=0" style="height:10px;"></div>
      <div class="row q-col-gutter-x-md">
        <left-navs v-bind:message= "tabs" v-bind:nums="nums" v-on:treeId="rightId" class="col-3 scroll" style=""></left-navs>
        <right-navs  v-bind:treeid= "treeid" v-bind:parentIds= "tabs" v-on:update= "num" class="col-9"></right-navs>
      </div>
    </div>
  </div>
</template>

<script>
import leftNavs from 'pages/Mdm/Category/leftNavs.vue'
import rightNavs from 'pages/Mdm/Category/rightNavs.vue'
export default {
  components: {
    leftNavs,
    rightNavs
  },
  data () {
    return {
      tabs: '',
      data: [],
      treeid: 0,
      nums: ''
    }
  },
  watch: {
  },
  created () {
    this.getTop()
  },
  methods: {
    rightId (data) {
      console.log(data, 74444444444)
      this.treeid = data
    },
    num (data) {
      this.nums = data
    },
    async getTop () {
      await this.$api({
        method: 'post',
        url: '/mdm/categoryType/selectAllByTenantId',
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          console.log(data)
          this.data = data
          this.tabs = this.data[0].id
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  }
}
</script>

<style lang="stylus">
   *{
     box-sizing border-box
   }
</style>
